import React, { Component, Fragment } from 'react'
import { CardWrap, ContentWrap } from './Style.js'
import { Card, Button, notification } from 'antd'
import {
  DownloadOutlined,
  SearchOutlined,
  PlusOutlined,
  FormOutlined,
} from '@ant-design/icons'
class NotificationComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: 'Notification',
    }
    this.handleClick = this.handleClick.bind(this)
    this.handleClick_1 = this.handleClick_1.bind(this)
    this.handleClick_2 = this.handleClick_2.bind(this)
    this.handleClick_3 = this.handleClick_3.bind(this)
    this.handleClick_4 = this.handleClick_4.bind(this)
    this.handleClick_5 = this.handleClick_5.bind(this)
    this.handleClick_6 = this.handleClick_6.bind(this)
    this.handleClick_7 = this.handleClick_7.bind(this)
    this.handleClick_8 = this.handleClick_8.bind(this)
    this.handleClick_9 = this.handleClick_9.bind(this)
  }
  render() {
    return (
      <Fragment>
        <ContentWrap>
          <CardWrap>
            <Card title="基础通知类型提醒框">
              <p>notification 类型</p>
              <p>1.类型有5种default,Success,Info,Warning,Error</p>
              <p>2.位置有四种topLeft,topRight,bottomLeft,bottomRight</p>
              <p>3.时间延迟delay</p>
              <p>4.message:标题名称</p>
              <p>5.description:问题描述</p>
            </Card>
          </CardWrap>

          <CardWrap>
            <Card title="通知类型提醒框">
              <Button type="primary" onClick={this.handleClick}>
                default
              </Button>
              <Button type="primary" onClick={this.handleClick_1}>
                Success
              </Button>
              <Button type="primary" onClick={this.handleClick_2}>
                Info
              </Button>
              <Button type="primary" onClick={this.handleClick_3}>
                Warning
              </Button>
              <Button type="primary" onClick={this.handleClick_4}>
                Error
              </Button>
            </Card>
          </CardWrap>

          <CardWrap>
            <Card title="通知修改位置提醒框">
              <Button type="primary" onClick={this.handleClick_5}>
                左上
              </Button>
              <Button type="primary" onClick={this.handleClick_6}>
                左下
              </Button>
              <Button type="primary" onClick={this.handleClick_7}>
                右上
              </Button>
              <Button type="primary" onClick={this.handleClick_8}>
                右下
              </Button>
              <Button type="primary" onClick={this.handleClick_9}>
                时间延迟10s关闭
              </Button>
            </Card>
          </CardWrap>
        </ContentWrap>
      </Fragment>
    )
  }

  handleClick() {
    notification.open({
      message: '右上角默认提示',
      description: '这就是右上角默认提示内容',
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_1() {
    notification['success']({
      message: '右上角成功提示',
      description: '这就是右上角成功提示内容',
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_2() {
    notification['info']({
      message: '右上角成功提示',
      description: '这就是右上角成功提示内容',
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_3() {
    notification['warning']({
      message: '右上角警告提示',
      description: '这就是右上角成功提示内容',
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_4() {
    notification['error']({
      message: '右上角关闭提示',
      description: '这就是右上角成功提示内容',
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_5() {
    notification.open({
      message: '左上角默认提示',
      description: '这就是左上角默认提示内容',
      placement: 'topLeft',
      icon: <DownloadOutlined />,
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_6() {
    notification['success']({
      message: '左下角默认提示',
      description: '这就是左下角默认提示内容',
      placement: 'bottomLeft',
      icon: <SearchOutlined />,
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_7() {
    notification['info']({
      message: '右上角默认提示',
      description: '这就是右上角默认提示内容',
      placement: 'topRight',
      icon: <PlusOutlined />,
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_8() {
    notification['error']({
      message: '右下角默认提示',
      description: '这就是右下角默认提示内容',
      placement: 'bottomRight',
      icon: <FormOutlined />,
      duration: 10,
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
  handleClick_9() {
    notification['info']({
      message: '右下角默认提示',
      description: '这就是右下角默认提示内容',
      placement: 'bottomRight',
      icon: <FormOutlined />,
      duration: 10,
      onClick: () => {
        console.log('点击了确定')
      },
      onClose: () => {
        console.log('点击了右上角的关闭')
      },
    })
  }
}

export default NotificationComponent
